<template>
  <el-container>
    <el-header class="el-header">
			<el-form ref="queryForm" :inline="true" label-width="68px">
				<el-form-item label="">
					<el-select v-model="selectedBaseId" @change="handleBaseChange" style="width: 200px" placeholder="请选择高基年份">
						<el-option
							v-for="item in baseList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="">
					<el-select v-model="selectedType" @change="handleTypeChange" style="width: 150px" clearable placeholder="请选择统计类型">
						<el-option
							v-for="item in typeList"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item> -->
				
				<el-form-item style="float: right">
					<el-button
						:disabled="disableStatisticsBtn"
						type="primary"
						size="mini"
						@click="handleStatistics"
					>汇总统计</el-button>
					<!-- <el-button
						type="success"
						size="mini"
						@click="printReport"
					>打印报告</el-button> -->
				</el-form-item>
			</el-form>
    </el-header>

		<el-container>
			<el-aside class="el-aside">
				<el-menu @select="handleCollegeChange">
					<el-menu-item v-for="item in collegeList" :key="item.orgId" :index="item.orgId + ''" >
						{{item.orgName}}
					</el-menu-item>
				</el-menu>
			</el-aside>
			
			<el-main>
				<el-table v-loading="loading" :data="baseCollegeList">
					<!-- <el-table-column type="selection" width="55" align="center" /> -->
					<el-table-column label="名称" align="left" :formatter="formatterType" />
					<el-table-column label="机构" align="left" :formatter="formatterCollegeOrgId" />
					<el-table-column label="校验状态" align="center" :formatter="formatterCheckStatus"/>
					<el-table-column label="统计人员" align="center" prop="createBy" />
					<el-table-column label="最近一次统计（日期）" align="center" prop="updateTime" />
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button
								size="mini"
								type="text"
								icon="el-icon-info"
								@click="handleDetail(scope.row)"
							>详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination
					v-show="total>0"
					:total="total"
					:page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize"
					@pagination="getList"
				/>
			</el-main>
			
		</el-container>

    <!-- 添加或修改高基对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-table height="400" :data="collegeList" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column label="学院" align="left" prop="orgName" />
					<el-table-column label="汇总状态" align="center" :formatter="formatterStatus" />
				</el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitStatistics">统 计</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

		<StatisticsProgress ref="statisticsProgress" :baseId="selectedBaseId" :typeList="typeList" :collegeList="collegeList"></StatisticsProgress>

		<DetailDialog ref="detailDialog"></DetailDialog>
  </el-container>
</template>

<script>
import { addBaseCollege, listBaseCollege } from "@/api/statistics/baseCollege";
import StatisticsProgress from "./statistics_progress.vue"
import DetailDialog from "./detail_dialog.vue"

export default {
  name: "DirectStatistics",
	components: {
		StatisticsProgress, 
		DetailDialog
	},
	props: {
		typeList: Array,
		baseList: Array,
		collegeList: Array
	},
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
			// 高基表年份
			selectedBaseId: null,
			selectedType: null,
			// 所选学院列表
			selectedCollegeList: [],
			// 选中学院
			selectedCollegeOrgId: null,
			// 学院List
			baseCollegeList: [],
			// 统计学院列表
			statisticsCollegeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        baseId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  computed: {
    disableStatisticsBtn() {
      return !this.selectedBaseId
    }
  },
  created() {
  },
  methods: {
		formatterCheckStatus(row, column) {
			if (row.checkStatus == '1') {
				return '校验通过'
			} else if (row.checkStatus == '2') {
				return '校验未通过'
			}
			return '待校验'
		},
		formatterType(row, column) {
			const type = this.typeList.find(item => item.value == row.type)
			if (type) {
				return type.label
			}
			return ''
		},
		formatterCollegeOrgId(row, column) {
			const college = this.collegeList.find(item => item.orgId == row.collegeOrgId)
			if (college) {
				return college.orgName
			}
			return ''
		},
		formatterStatus(row, column) {
			const college = this.statisticsCollegeList.find(item => item.collegeOrgId == row.orgId)
			if (college) {
				return '已汇总'
			}
			return ''
		},
		handleCollegeChange(value) {
			this.selectedCollegeOrgId = value
			this.getList()
		},
		handleBaseChange(value) {
			this.selectedBaseId = value
			this.getList()
		},
		handleTypeChange(value) {
			this.selectedType = value
			this.getList()
		},
    /** 查询高基列表 */
    getList() {
			if (!this.selectedBaseId || !this.selectedCollegeOrgId) {
				return
			}
			this.queryParams.baseId = this.selectedBaseId
			this.queryParams.type = this.selectedType
			this.queryParams.collegeOrgId = this.selectedCollegeOrgId
      this.loading = true;
      listBaseCollege(this.queryParams).then(response => {
        this.baseCollegeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
			this.selectedCollegeList = []
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 提交按钮 */
    submitForm() {
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     if (this.form.id != null) {
      //       updateBase(this.form).then(response => {
      //         this.msgSuccess("修改成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     } else {
      //       addBase(this.form).then(response => {
      //         this.msgSuccess("新增成功");
      //         this.open = false;
      //         this.getBaseList();
      //       });
      //     }
      //   }
      // });
    },
		handleDetail(row, column) {
			this.$refs.detailDialog.handleShow(row.id)
		},
		handleStatistics() {
			this.$refs.statisticsProgress.handleShow();
			// this.title = '汇总统计'
			// this.reset()
			// this.open = true
			// const queryParams = {
      //   pageNum: 1,
      //   pageSize: 100,
			// 	type: this.selectedType,
			// 	baseId: this.selectedBaseId
      // }
			// listBaseCollege(queryParams).then(response => {
      //   this.statisticsCollegeList = response.rows;
      // });
		},
		/** 学院选择 */
		handleSelectionChange(selection) {
			this.selectedCollegeList = selection
		},
		submitStatistics() {
			if (this.selectedCollegeList.length > 0) {
				const collegeOrgIdArray = this.selectedCollegeList.map(item => item.orgId)
				const data = {
					type: this.selectedType,
					baseId: this.selectedBaseId,
					collegeOrgIdArray: collegeOrgIdArray
				}
				addBaseCollege(data).then(response => {
					this.msgSuccess("统计完成");
					this.getList()
					this.statisticsOpen = false
					this.$refs.statisticsTable.clearSelection()
				})
			} else {
				this.msgError("请先选择机构");
			}
		},
    /** 导出按钮操作 */
    handleExport() {
      // const queryParams = this.queryParams;
      // this.$confirm('是否确认导出所有高基数据项?', "警告", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning"
      //   }).then(function() {
      //     return exportBase(queryParams);
      //   }).then(response => {
      //     this.download(response.msg);
      //   })
    }
  }
};
</script>

<style lang="scss" scoped>
.el-header {
	border-bottom: 1px solid #dfe4ed;
}
.el-aside {
	width: 300px;
	background-color: white;
	min-height: 500px;

	.el-menu {
		width: fit-content;

	}
}
</style>
